<template>
	<PageWrap title="" leftType="" v-if="true">
		<view class="page-index">
			<view class="bg">
				<view class="bg-img" />
			</view>
			<view class="des">
				<view class="menu-wrap">
					<view class="group">
						<view class="group-title">
							<span> 工艺 </span>
						</view>
						<view class="array">
							<view class="item" v-for="item in itemTypeOptions" :key="item.id">
								<view class="item-l" @click="clickItem(item)">
									<view class="span-content">
										<view class="span">
											<span class="mr-1">{{ item.productName }}</span>
										</view>
										<view class="subspan">
											{{ item.routeCode }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="group">
						<view class="group-title">
							<span>操作</span>
						</view>
						<view class="array">

							<view style="padding: 10px;">
								<!-- <u-button type="primary" style="width: 300rpx" @click="changeTeam">生产交班</u-button> -->
								<u-popup v-model="showChangeTeam" mode="center" width="30%" height="40%"
									border-radius="10" @close="closePopup">
									<ChangeTeam :itemTypeOptions="itemTypeOptions" @closePopup="closePopup">
									</ChangeTeam>
								</u-popup>
							</view>
							<view style="padding: 10px;">
								<u-button type="primary" style="width: 300rpx" @click="logout">退出登录</u-button>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</PageWrap>
</template>

<script>
	import PageWrap from "./components/page-wrap";
	import ChangeTeam from './reportProductio/changeTeam.vue'
	export default {
		components: {
			PageWrap,
			ChangeTeam
		},
		data() {
			return {
				primaryColor: "black",
				project: "EMS",
				// 所有菜单
				menuList: [],
				itemTypeOptions: [],
				showChangeTeam: false
			};

		},
		computed: {},
		mounted() {
			// const {
			// 	listMenu
			// } = this.$u.api;
			// listMenu({
			// 	pageNum: 1,
			// 	pageSize: 20
			// }).then(res => {
			// 	console.log("menu", res)
			// 	this.menuList = res.rows;
			// })
			// 获取获取工作站
			// this.$u.api.getTreeselect().then(res => {
			// 	this.itemTypeOptions = res.data;
			// });
			// 获取所有产线
			// this.$u.api.getWorkLine().then(res => {
			// 	this.itemTypeOptions = res.data;
			// })
			// 获取所有工艺流程
			this.$u.api.listRouteproduct({
				pageSize: 200,
				pageNum: 1
			}).then(res => {
				console.log('工艺流程', res)
				this.itemTypeOptions = res.rows.filter(item => item.isDefault == true)
			})
		},
		methods: {
			logout() {
				// 处理退出登录操作
				// 你可以在这里执行退出登录的逻辑，例如清除用户信息、跳转到登录页面等

				const {
					logout
				} = this.$u.api;
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定注销并退出系统吗？',
					// showCancel:false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							logout().then(res => {
								if (res.code == 200) {
									that.$u.vuex('vuex_token', '');
									uni.reLaunch({
										url: '/pages/sys/login/login'
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					},
					// 		fail() {

					// 		}

				})



			},
			// 下拉刷新
			onPullDownRefresh() {
				console.log('用户发生了下拉刷新')

				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1500)
			},
			// 点击菜单
			clickItem(item) {

				const data = item
				// uni.navigateTo({
				// 	url: '/pages/index/reportProductio/index?processPara=' + JSON.stringify(para)
				// });
				uni.navigateTo({
					url: '/pages/index/processList?processdata=' + JSON.stringify(data)
				});
			},
			// 生产交班
			changeTeam() {
				this.showChangeTeam = true;
			},
			// 生产交班关闭
			closePopup() {
				this.showChangeTeam = false;
			}
		},
	};
</script>
<style lang="scss" scoped>
	.page-index {
		position: relative;
		//   width: 100vw;
		//   height: 100vh;
		color: black;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.des {
		position: relative;
		z-index: 10;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.item {
		position: relative;
		width: 20%;
		box-sizing: border-box;
		height: 146px;
		padding: 10px;
		padding-left: 30px;
		padding-right: 10px;
		border: solid 1px #fff;
		background: linear-gradient(180deg,
				#ffffff 0%,
				#ffffff 0.01%,
				#ffffff 119.85%);
		border-radius: 4px;
		margin: 0 18px;
		margin-bottom: 24px;
		overflow: hidden;
		display: flex;

		&:active {
			border-color: #fff;
		}

		.item-l {
			height: 100%;
			flex: auto;
			display: flex;
			flex-direction: column;

			.icon-bottom {
				width: 38.59px;
				height: 4px;
				background: inear-gradient(270deg, #ebedf0 2.78%, #edeff1 100%);
				border-radius: 4px;
			}

			.span-content {
				flex: auto;
			}

			.subspan {
				color: #aaa;
				font-size: 14px;
				line-height: 30px;
			}

			.span {
				display: flex;
				flex: auto;
				align-items: flex-start;
				padding-top: 10px;
				font-weight: 400;
				font-size: 20px;
				line-height: 32px;
			}
		}
	}

	.menu-icon-bg {
		position: absolute;
		z-index: 2;
		// outline: solid 1px red;
		right: -40px;
		top: -16px;
	}

	.menu-wrap {
		padding: 40rpx 50rpx;
	}

	.item-r {
		position: absolute;
		height: 40px;
		top: 0;
	}

	.menu-icon {
		width: 144px;
		height: 144px;
		display: block;
		z-index: 10;
	}

	.star-button {
		width: 30px;
		height: 30px;
		text-align: right;
		position: relative;
		z-index: 30;
	}

	.mr-1 {
		margin-right: 4px;
	}

	.menu-list {
		max-width: 100%;
		width: 100%;
		padding: 0 10px;
	}

	.group {}

	.array {
		display: flex;
		flex-wrap: wrap;
		margin: 0 16px;
	}

	.group-title {
		font-size: 20px;
		line-height: 32px;
		margin-bottom: 16px;
		font-weight: 500;
	}

	.bg {
		width: 100%;
		height: 100%;
		position: fixed;

		.bg-img {
			height: 100%;
			width: 100%;
			background-color: #aaa;
			background-size: 100%;
		}
	}

	.banner-span {
		height: 310px;
		padding-top: 120px;
		box-sizing: border-box;
	}
</style>